<template>
  <view class="dashboard">
    <view class="header">
      <text class="title">管理后台</text>
    </view>

    <view class="stats-grid">
      <view class="stat-card">
        <text class="stat-number">{{ stats.totalUsers }}</text>
        <text class="stat-label">总用户数</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ stats.totalOrders }}</text>
        <text class="stat-label">总订单数</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ stats.totalRevenue }}</text>
        <text class="stat-label">总收入</text>
      </view>
      <view class="stat-card">
        <text class="stat-number">{{ stats.activeAds }}</text>
        <text class="stat-label">活跃广告</text>
      </view>
    </view>

    <view class="quick-actions">
      <text class="section-title">快速操作</text>
      <view class="action-grid">
        <view class="action-item" @click="navigateToUsers">
          <text class="action-icon">👥</text>
          <text class="action-label">用户管理</text>
        </view>
        <view class="action-item" @click="navigateToOrders">
          <text class="action-icon">📋</text>
          <text class="action-label">订单管理</text>
        </view>
        <view class="action-item" @click="navigateToProducts">
          <text class="action-icon">📦</text>
          <text class="action-label">商品管理</text>
        </view>
        <view class="action-item" @click="navigateToAdmins">
          <text class="action-icon">👨‍💼</text>
          <text class="action-label">管理员</text>
        </view>
        <view class="action-item" @click="navigateToPermissions">
          <text class="action-icon">🔐</text>
          <text class="action-label">权限管理</text>
        </view>
        <view class="action-item" @click="navigateToPoints">
          <text class="action-icon">💰</text>
          <text class="action-label">积分管理</text>
        </view>
        <view class="action-item" @click="navigateToAnalytics">
          <text class="action-icon">📊</text>
          <text class="action-label">数据分析</text>
        </view>
      </view>
    </view>

    <view class="recent-orders">
      <text class="section-title">最近订单</text>
      <view class="order-list">
        <view v-for="order in recentOrders" :key="order.id" class="order-item">
          <view class="order-info">
            <text class="order-number">{{ order.orderNumber }}</text>
            <text class="order-amount">¥{{ order.finalAmount }}</text>
          </view>
          <text class="order-status" :class="'status-' + order.status">{{ getStatusText(order.status) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stats: {
        totalUsers: 0,
        totalOrders: 0,
        totalRevenue: 0,
        activeAds: 0
      },
      recentOrders: []
    }
  },

  onLoad() {
    this.loadDashboardData()
  },

  methods: {
    async loadDashboardData() {
      try {
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.navigateTo({ url: '/pages/auth/login' })
          return
        }

        // 加载统计数据
        const { getDashboardData } = require('@/api/admin')
        const statsRes = await getDashboardData()

        console.log('Dashboard API响应:', statsRes)

        if (statsRes && statsRes.success) {
          const data = statsRes.data
          this.stats = {
            totalUsers: data.users.total,
            totalOrders: data.orders.total,
            totalRevenue: data.revenue.total ? data.revenue.total.toFixed(2) : '0.00',
            activeAds: data.products.active // Using active products as a proxy for active ads
          }
        }

        // 加载最近订单
        const { getAdminOrders } = require('@/api/admin')
        const ordersRes = await getAdminOrders({ limit: 5 })

        console.log('Orders API响应:', ordersRes)

        if (ordersRes && ordersRes.success) {
          this.recentOrders = ordersRes.data.orders || []
        }

      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        })
      }
    },

    navigateToUsers() {
      uni.navigateTo({ url: '/pages/admin/users' })
    },

    navigateToOrders() {
      uni.navigateTo({ url: '/pages/admin/orders' })
    },

    navigateToProducts() {
      uni.navigateTo({ url: '/pages/admin/products' })
    },

    navigateToAdmins() {
      uni.navigateTo({ url: '/pages/admin/admins' })
    },

    navigateToPermissions() {
      uni.navigateTo({ url: '/pages/admin/permissions' })
    },

    navigateToPoints() {
      uni.navigateTo({ url: '/pages/admin/points' })
    },

    navigateToAnalytics() {
      uni.navigateTo({ url: '/pages/admin/analytics' })
    },

    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'confirmed': '已确认',
        'processing': '处理中',
        'printing': '打印中',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.stat-card {
  background: white;
  padding: 30rpx;
  border-radius: 12rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stat-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #007bff;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 28rpx;
  color: #666;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.action-item {
  background: white;
  padding: 30rpx;
  border-radius: 12rpx;
  text-align: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.action-icon {
  display: block;
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.action-label {
  font-size: 28rpx;
  color: #333;
}

.recent-orders {
  background: white;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.order-list {
  margin-top: 20rpx;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.order-item:last-child {
  border-bottom: none;
}

.order-info {
  flex: 1;
}

.order-number {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.order-amount {
  font-size: 24rpx;
  color: #666;
}

.order-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: white;
}

.status-pending {
  background-color: #ffc107;
}

.status-confirmed {
  background-color: #17a2b8;
}

.status-processing {
  background-color: #007bff;
}

.status-printing {
  background-color: #6f42c1;
}

.status-completed {
  background-color: #28a745;
}

.status-cancelled {
  background-color: #dc3545;
}
</style>